<!DOCTYPE html>
<html>
<head>
<title>Deffiti</title>
<link rel="stylesheet" href="styles/main.css" type="text/css">
<link rel="stylesheet" href="styles/ui-lightness/jquery-ui-1.8.9.custom.css" type="text/css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<script type="text/javascript"
    src="scripts/jquery.js">
</script>

<script type="text/javascript"
    src="scripts/jquery-ui-1.8.9.custom.min.js">
</script>

<script type="text/javascript"
    src="scripts/main.js">
</script>

</head>
<body>
  <div id="topbar">
	<div id="titleImg">
	  <img src="images/defitti.png" height="75" >
	</div>
	<div id="loginRegister">
	  <a href="#" onclick="showLogin()">Login</a>  |
	  <a href="#" onclick="showRegister()">Register</a>
	</div>
	<div id="login-info-dropdown">
		<span id="loginInfo"></span>
		<a href="#" onclick="showSubmitSpot()">Submit Spot</a>
	</div>
	<div id="submit-spot-dropdown">
		<form id="submitSpotForm" action="actions/addSpot.php" method="post" enctype="multipart/form-data" target="submitFrame">
			<h3>Spot Something!</h3>
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td>Title:</td>
					<td><input type="text" id="add-spot-title" name="Title" /></td>
				</tr>
				<tr>
					<td>Image:</td>
					<td><input type="file" id="add-spot-image" name="Image" /></td>
				</tr>
				<tr>
					<td>X:</td>
					<td><input type="text" name="X" id="add-spot-x" size="2" /></td>
				</tr>
				<tr>
					<td>Y:</td>
					<td><input type="text" name="Y" id="add-spot-y" size="2" /></td>
				</tr>
				<tr>
					<td><input type="submit" id="spotButton" value="Spot!" /></td>
					<td align="right"><input type="button" onclick="hideAll()" value="Close" /></td>
				</tr>
			</table>
		</form>
		<iframe id="submitFrame" name="submitFrame"></iframe>
	</div>
  </div>
  <div id="map_canvas"></div>
  <div id="login-dropdown">
	<form id="login-form">
		<h3>Login</h3>
		<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td>Email:</td>
					<td><input type="text" id="login-email" value="" /></td>
				</tr>
				<tr>
					<td>Password:</td>
					<td><input type="password" id="login-password" value="" /></td>
				</tr>
				<tr>
					<td><input type="submit" text="Login" /></td>
					<td align="right"><input type="button" onclick="hideAll()" value="Close" /></td>
				</tr>
		</table>
	</form>
  </div>
  <div id="register-dropdown">
	<form id="register-form">
		<h3>Register</h3>
		<table border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td>Email:</td>
				<td><input type="text" id="register-email" value="" /></td>
			</tr>
			<tr>
				<td>Password:</td>
				<td><input type="password" id="register-password" value="" /></td>
			</tr>
			<tr>
				<td>First Name:</td>
				<td><input type="text" id="register-name" value="" /></td>
			</tr>
			<tr>
				<td>Last Name:</td>
				<td><input type="text" id="register-lname" value="" /></td>
			</tr>
			<tr>
				<td><input type="submit" text="Reigster" /></td>
				<td align="right"><input type="button" onclick="hideAll()" value="Close" /></td>
			</tr>
		</table>
	</form>
  </div>
  
  <div id="spotDialog">
    <div id="title">	
    </div>
	<div id="image"></div>
	<a href="#" id="upVote">Vote Up</a>
	<a href="#" id="downVote">Vote Down</a>
	<h2>Messages</h2>
	<textarea id="spotMessage" rows="2"></textarea><br/>
	<input type="hidden" id="spotID" />
	<input type="button" id="spotMessageSubmit" onclick="addMessage()" value="Comment" />
    <ul id="messages">
	
    </ul>
  </div>
</body>
</html>
